import React, { useEffect, useState } from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import { View } from 'native-base';
import { WebView } from 'react-native-webview';
import { useReactive } from 'ahooks';

interface IDatePickerProps {
  title?: string;
  show: boolean;
  onChange?: (date: string[]) => void;
  onClose: () => void;
  onConfirm: (date: string[]) => void;
  closeOnClickOverlay?: boolean;
  currentDate: Array<string | number>; // 选中时间
  columnsType?: string[]; // 选项类型，选项类型，由 year、month 和 day 组成的数组
  minDate?: string;
  maxDate?: string;
}

interface IState {
  uri: string;
  currentDate: string[];
}

const DatePicker: React.FC<IDatePickerProps> = ({ show, title, onChange, onClose, onConfirm, closeOnClickOverlay, currentDate, columnsType, maxDate, minDate }) => {
  const [isModalVisible, setModalVisible] = useState(true);
  const state = useReactive<IState>({
    uri: 'https://kics.kanglailab.com/datePicker',
    currentDate: [],
  });

  useEffect(() => {
    setModalVisible(show);
    state.uri = `https://kics.kanglailab.com/datePicker?currentDate=${JSON.stringify(currentDate)}&columnsType=${columnsType ? JSON.stringify(columnsType) : ''}&minDate=${minDate}&maxDate=${maxDate}`;
  }, [show]);

  /**
   * 处理来自 WebView 的消息
   * @param event
   */
  const handleWebViewMessage = async (event: any) => {
    const message = event.nativeEvent.data;
    state.currentDate = JSON.parse(message);
    if (onChange) onChange(state.currentDate);
  };

  /**
   * 提交
   */
  const handleConfirm = () => {
    if (onConfirm) onConfirm(state.currentDate);
  };

  return (
    <React.Fragment>
      <Modal visible={isModalVisible} transparent animationType="fade">
        <Touchable
          style={styles.touchArea}
          onPress={() => {
            closeOnClickOverlay ? onClose() : undefined;
          }}
        >
          <View></View>
        </Touchable>
        <View style={styles.container}>
          <View style={styles.pickerContainer}>
            {/* 标题和按钮 */}
            <View style={styles.header}>
              <TouchableOpacity onPress={onClose}>
                <Text style={[styles.button, { color: '#969799' }]}>取消</Text>
              </TouchableOpacity>
              <Text style={styles.title}>{title}</Text>
              <TouchableOpacity onPress={handleConfirm}>
                <Text style={styles.button}>确认</Text>
              </TouchableOpacity>
            </View>

            <View style={styles.pickerContent}>
              <WebView source={{ uri: state.uri }} onMessage={handleWebViewMessage} />
            </View>
          </View>
        </View>
      </Modal>
    </React.Fragment>
  );
};
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'flex-end' },
  touchArea: { flex: 1 },
  header: { flexDirection: 'row', justifyContent: 'space-between', padding: 15, borderBottomWidth: 1, borderBottomColor: '#ddd' },
  title: { fontSize: 16, fontWeight: 'bold' },
  button: { fontSize: 14, color: '#333333' },
  pickerContent: { position: 'relative', height: 250, justifyContent: 'center', paddingHorizontal: 16 },
  pickerContainer: { backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20, paddingBottom: 20 },
});

export default DatePicker;
